<template>
  <button 
    :class="[
      'btn', 
      `btn-${type}`,
      size ? `btn-${size}` : '',
      block ? 'btn-block' : '',
      disabled ? 'btn-disabled' : '',
      loading ? 'btn-loading' : '',
    ]"
    :disabled="disabled"
    @click="handleClick"
  >
    <text v-if="loading" class="btn-loading-icon">⟳</text>
    <slot></slot>
  </button>
</template>

<script>
/**
 * 通用按钮组件
 * 基于全局按钮样式，提供组件化的使用方式
 * 
 * 使用示例:
 * <app-button type="primary" @click="handleAction">提交</app-button>
 */
export default {
  name: 'AppButton',
  props: {
    // 按钮类型：primary, secondary, danger, success, warning, info
    type: {
      type: String,
      default: 'primary'
    },
    // 按钮大小：默认、lg、sm、xs
    size: {
      type: String,
      default: ''
    },
    // 是否块级按钮（通栏）
    block: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示加载状态
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick(event) {
      if (!this.disabled && !this.loading) {
        this.$emit('click', event);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 
 * 此组件使用了全局按钮样式
 * 详见: @/styles/button.scss
 * 
 * 这里只定义组件特有的样式
 */
.btn-loading-icon {
  display: inline-block;
  margin-right: 10rpx;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style> 